<template>
  <RouterView />
  <van-tabbar
    v-if="showTabbar.includes(route.fullPath)"
    v-model="active"
    @change="onChange"
  >
    <van-tabbar-item icon="home-o" name="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="user-o" name="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter, RouterView } from "vue-router";

const showTabbar = ref(["/home", "/my"]);
const route = useRoute();
const router = useRouter();
const active = ref(route.fullPath);
function onChange() {
  router.push({
    path: active.value,
  });
}

watch(
  route,
  () => {
    if (showTabbar.value.includes(route.fullPath)) {
      active.value = route.fullPath;
      onChange();
    }
  },
  { immediate: true }
);
</script>

<style scoped></style>
